<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/jsp/common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <style type="text/css">

	   input{
		   border: 1px solid #ccc;
		   padding: 7px 0px;
		   border-radius: 3px; /*css3属性IE不支持*/
		   padding-left:5px;
		   width: 60px;
		   height: 30px;
	   }

   </style>
   <body style="height: 100%; margin: 0">

       			<div class="col-md-3 col-sm-3">
					<input type="text" id="datefix" readonly onclick="selectYear()"  >
					<button type="button" class="btn btn-primary" style="width: 75px;" id="createExcel" ><span class="glyphicon glyphicon-list-alt"></span></button>
				</div>
       	   <div  style="display:none">
			 <table id="datatable" class="table table-hover table-striped table-condensed text-center"  >
				<tr class="bg-default">
					<td>患者地区</td>
					<td>预约总量</td>
				</tr>
				<tbody id="tboby"></tbody>
			</table>

	 </div>
				<br>
				<div id="main" style="height: 100%"></div>
       <script type="text/javascript">
		var dom = document.getElementById("main");
		var myChart = echarts.init(dom);

		option = {
		    title : {
		        text: '全国患者分布统计表',
		        subtext: ' ',
		        left: 'center'
		    },
		    tooltip : {
		        trigger: 'item'
		    },

		    visualMap: {
		        min: 0,
		        max: 10000,
		        left: 'left',
		        top: 'bottom',
		        text:['高','低'],           // 文本，默认为数值文本
		        calculable : true
		    },
		    toolbox: {
		        show: true,
		        orient : 'vertical',
		        left: 'right',
		        top: 'center',
		        feature : {

		            mark : {show: true},
		            dataView : {show: true, readOnly: false}, //数据视图
		            restore : {show: true},//重置
		            saveAsImage : {show: true}//保存图片
		        }
		    },

		    series : [
		        {
		            name: '地区',
		            type: 'map',
		            mapType: 'china',
		            roam: false,
		            label: {
		                normal: {
		                    show: false
		                },
		                emphasis: {
		                    show: true
		                }
		            },
		            data:[],
				        }]
				};



		myChart.setOption(option,true);
		$(function () {
			var date1=new Date();
			$("#datefix").val(date1.getFullYear());
			download($("#datefix").val());
		})

		var date=new Date();
		var year=date.getFullYear()+"-"+date.getMonth()+"-"+date.getDay();
		function selectYear(){
			$("#datefix").jeDate({
				maxDate: year,
				format:"YYYY",
				zIndex:3000,
				choosefun:function (a,b,c) {
					download(b);
				}
			})
		}


		function download(inp){
			option.title.subtext = inp;
			var url ="/forms/queryArea";
			var data=inp;

			$.post(url,{"data":data},function(r){
				$("#tboby").empty();
				option.series[0].data=r;
				for (var key in r) {

					var td1="<td>"+r[key].name+"</td>";
					var td2="<td>"+r[key].value+"</td>";
					var tr="<tr>"+td1+td2+"</tr>";
					$("#tboby").append(tr);
				}
				myChart.setOption(option,true);



			},"json")
			myChart.setOption(option,true);
		}



		//导出表格
		$("#createExcel").click(function(){
			var year =$("#datefix");
			var ayear=year.val();

			$("#datatable").table2excel({   			// table2excel插件的可用配置参数有：
				exclude: ".noExl",  					//  exclude：不被导出的表格行的CSS class类。
				name: "Excel Document Name",    		// name：导出的Excel文档的名称。
				filename: ayear+"年患者地区分布统计表.xls",   	//filename：Excel文件的名称。
				exclude_img: true,  				    //exclude_img：是否导出图片。
				exclude_links: true,  					// exclude_links：是否导出超链接
				exclude_inputs: true  					// exclude_inputs：是否导出输入框中的内容。
			});
		})
	   </script>
   </body>
</html>


